﻿@page
@Html.AntiForgeryToken()

@model txlcinfo.DSKH.Web.Pages.khModel
@{
    Layout = null;
}
@section styles {
    <abp-style src="/Pages/kh.css" />
}
@section scripts {s
    <abp-script src="/Pages/kh.js" />
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>河南农业科学院年度考核民主测评</title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.css" />
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.3.0/weui.min.css" />
    <link rel="stylesheet" href="https://image.wjx.com/joinnew/css/jqmobo.css?v=1339" />

    <link rel="stylesheet" href="~/libs/swiper-3.4.2.min.css">

    <script src="https://lib.baomitu.com/jquery/1.12.4/jquery.js"></script>
    <script src="~/libs/swiper-3.4.2.jquery.min.js"></script>

    <style>

        .swiper-container {
            font-family: "Microsoft Yahei", helvetica;
            width: 100%;
        }

        .swiper-button-disabled {
            display: none;
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
        }

        .timu {
            margin: 0 20px;
            width: 100%;
            padding: 20px;
            padding-bottom: 30px;
            background-color: #ffffffb3;
            color: #b30008;
            border-radius: 25px;
        }

        .timutitle {
            text-align: left;
        }

        .swiper-pagination {
            visibility: hidden;
        }

        .cl {
            padding-bottom: 10px;
        }

        .headertitle {
            font-weight: bolder;
        }

        .cls {
            font-size: 15px;
            margin-left: 1.9em;
            padding: 10px;
        }

        .cinfo {
            margin-left: 1.5em;
            margin-top: 0px;
        }

        .namel {
            padding: 0 10px;
        }

        .namer {
            margin-right: 5px;
            appearance: none;
        }

        .namerline {
            text-align: center;
        }

        .radio input[type="radio"] {
            position: absolute;
            opacity: 0;
        }

        .radio-label_s {
            font-size: 14px;
        }

        .radio-label {
            padding-right: 1rem;
            overflow: hidden;
        }

        .select2-selection {
            margin: 0 1em;
        }

        .radio {
            padding: 0.5em;
            margin-top: 0.2em;
            background: #ffffff61;
        }

            .radio input[type="radio"] + .radio-label:before {
                content: '';
                background: #ffffff;
                border-radius: 100%;
                border: 3px solid #b30008;
                display: inline-block;
                width: 20px;
                height: 20px;
                position: relative;
                top: 0.2em;
                margin-right: 0.5em;
                vertical-align: top;
                cursor: pointer;
                text-align: center;
                -webkit-transition: all 250ms ease;
                transition: all 250ms ease;
            }

            .radio input[type="radio"]:checked + .radio-label:before {
                background-color: #b30008;
                box-shadow: inset 0 0 0 4px #f4f4f4;
            }

            .radio input[type="radio"]:focus + .radio-label:before {
                outline: none;
                border-color: #b30008;
            }

            .radio input[type="radio"]:disabled + .radio-label:before {
                box-shadow: inset 0 0 0 4px #f4f4f4;
                border-color: #b4b4b4;
                background: #b30008;
            }

            .radio input[type="radio"] + .radio-label:empty:before {
                margin-right: 0;
            }


            .radio input[type="radio"] + .radio-label_s:before {
                top: 0.6em;
                margin-right: 0.5em;
            }

        .tmbtn {
            background: white;
            top: 1em;
            padding: 0.3em 1.5em;
            color: #b30008;
            position: relative;
            border-radius: 2em;
        }

            .tmbtn.disabled {
                color: #d1caca;
            }

        .slinetable {
            width: 100%;
        }
    </style>

    <script>

        $(function () {

            var code = GetQueryString('code');
            var departmentid = GetQueryString('departmentid');
            var callback = 'personal.html';
            var appId = "wxcf543e81e36dff35";
            var issubmit = false;

            var redirect_uri = window.location.origin + window.location.pathname;
            console.log(encodeURI(redirect_uri))

            var wx_link = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + appId + '&redirect_uri=http://aca.hnzktc.com/kh/' +
                '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect';

            console.log(code)
            if (code == null) {
                //window.location.href = wx_link;
                code = GetQueryString('code');
            }
            //else {
            //    $.ajax({
            //        url: 'http://www.iopan.cn/familytrip/f/wxlogin',
            //        type: 'POST',
            //        async: true,
            //        xhrFields: {
            //            withCredentials: true
            //        },
            //        data: {
            //            code: code
            //        },
            //        success: function (res) {
            //            if (res.status == 200) {
            //                window.location.href = "personal.html"
            //            } else {
            //                console.log(res)
            //                return false;
            //            }
            //        },
            //        error: function () {
            //            alert('服务器发生错误！');
            //        }
            //    });

            //}


            $("#submitbutton").click(function () {
                var $dia = $("#iosDialog1");
                $dia.fadeIn(200);
            });

            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;

            }
            $("#submitCancel").click(function () {
                var $dia = $("#iosDialog1");
                $dia.hide(200);
            });
            $("#submitok").click(function () {
                if (issubmit == false) {
                    issubmit = true;
                    document.getElementById("myForm").submit();
                }
            });

            function updateSingle() {
                var wxid = $("#wxOpenID").val();
                var idx = swiper.realIndex;
                var jo = $('input[name="ListUserExerciseIdxs[' + idx + '].UserAnswer"]:checked')

                var valOftimu = jo.val()
                $.ajax({
                    type: 'POST',
                    url: "?handler=Single",
                    contentType: 'application/x-www-form-urlencoded',
                    data: { 'wxid': wxid, 'value': valOftimu },
                    headers: {
                        "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val()
                    },
                    success: function (result) {
                        //alert(result);
                    }
                });


            }

            function updatebaseInfo() {
                var wxid = $("#wxOpenID").val();
                var idx = swiper.realIndex;
                var jo = $('input[name="ListUserExerciseIdxs[' + idx + '].UserAnswer"]:checked')
                var name = $("#username").val();
                var phone = $("#userphone").val();

                var valOftimu = jo.val()
                $.ajax({
                    type: 'POST',
                    url: "?handler=BaseInfo",
                    contentType: 'application/x-www-form-urlencoded',
                    data: { 'wxid': wxid, 'name': name, 'phone': phone },
                    headers: {
                        "XSRF-TOKEN": $('input:hidden[name="__RequestVerificationToken"]').val()
                    },
                    success: function (result) {
                        //alert(result);
                    }
                });
            }

            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: '.swiper-pagination',
                spaceBetween: 30,
                noSwiping: true,
                paginationHide: true,
                onSlideChangeEnd: function (swiper) {
                    var ridx = swiper.realIndex - 1;
                    var valOftimu = $('input[name="ListUserExerciseIdxs[' + ridx + '].UserAnswer"]:checked').val()
                    if (!valOftimu) {
                        swiper.slideTo(ridx);
                    }
                }
            });
            $(".prevButton").click(function () {
                swiper.slidePrev();

            });
            $(".nextButton").click(function () {
                updateSingle();
                swiper.slideNext();
            });
            $("#beginbutton").click(function () {
                updatebaseInfo();
                swiper.slideNext();
            });

            $('input[type=radio]').change(function () {
                var idx = swiper.realIndex;


                var jo = $('input[name="ListUserExerciseIdxs[' + idx + '].UserAnswer"]:checked')

                var valOftimu = jo.val()
                if (!valOftimu) {
                    return;
                }
                $("#nextButton-" + idx).removeClass("disabled");
                if (idx == 24) {
                    $("#submitbutton").removeClass("disabled");
                }

                //alert(valOftimu);

            });

        });

    </script>
</head>


<body style="background-repeat: no-repeat;background-color:#b30008; background-size: 100%; background-image: url('images/bg3.png')">
    <form id="myForm" action="" method="post">
        <div class="page">
            <div style="">
                <h2 style="font-size: 20px;text-align: center;padding: 30px 0 0 0;color: #fff;">
                    河南省农业科学院农信所
                    <input type="hidden" id="wxOpenID" asp-for="wxOpenID" />
                    <input type="hidden" asp-for="wxNickName" />
                </h2>
                <h2 style="font-size: 20px;text-align: center;padding: 0 0 30px 0;color: #fff;">
                    学习党史教育成果考核
                </h2>
            </div>

            <div class="swiper-container">
                <div class="swiper-wrapper">

                    <div class="swiper-slide swiper-no-swiping">
                        <div class="timu" style="height: 20em;padding-top: 6em;">
                            <div class="timutitle">
                                <div class="weui-cell weui-cell_active" style="padding:10px" id="js_cell">
                                    <div class="weui-cell__hd"><label class="weui-label">姓名：</label></div>
                                    <div class="weui-cell__bd weui-flex">
                                        <input id="username" asp-for="UserName" class="weui-input" autofocus="" type="text" pattern="[0-9]*" placeholder="请输入姓名" maxlength="16">
                                        <button id="js_input_clear" class="weui-btn_reset weui-btn_icon weui-btn_input-clear">
                                            <i class="weui-icon-clear"></i>
                                        </button>
                                    </div>
                                </div>
                                <div class="weui-cell weui-cell_active" style="padding:10px" id="js_cell">
                                    <div class="weui-cell__hd"><label class="weui-label">手机号：</label></div>
                                    <div class="weui-cell__bd weui-flex">
                                        <input id="userphone" asp-for="UserPhone" class="weui-input" autofocus="" type="text" pattern="[0-9]*" placeholder="请输入姓名" maxlength="16">
                                        <button id="js_input_clear" class="weui-btn_reset weui-btn_icon weui-btn_input-clear">
                                            <i class="weui-icon-clear"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <a href="javascript:;" id="beginbutton" class="tmbtn">开始答题</a>
                        </div>
                    </div>



                    @for (int i = 0; i < Model.ListUserExerciseIdxs.Count(); i++)
                    {
                        var item = Model.ListUserExerciseIdxs[i];
                        <div class="swiper-slide swiper-no-swiping">
                            <div class="timu">
                                <p style="text-align:right;"><span style="font-size:2em;font-weight:900;">@(i + 1)</span>/25</p>
                                <div class="timutitle">
                                    <p><span>@item.Title</span></p>
                                    <div class="radio">
                                        <input id="radio-a-@item.Idx" asp-for="ListUserExerciseIdxs[i].UserAnswer" value="@item.Idx-A" type="radio">
                                        <label for="radio-a-@item.Idx" class="radio-label">@i-@item.RadioATitle</label>
                                    </div>
                                    <div class="radio">
                                        <input id="radio-b-@item.Idx" asp-for="ListUserExerciseIdxs[i].UserAnswer" value="@item.Idx-B" type="radio">
                                        <label for="radio-b-@item.Idx" class="radio-label">@item.RadioBTitle</label>
                                    </div>
                                    <div class="radio">
                                        <input id="radio-c-@item.Idx" asp-for="ListUserExerciseIdxs[i].UserAnswer" value="@item.Idx-C" type="radio">
                                        <label for="radio-c-@item.Idx" class="radio-label">@item.RadioCTitle</label>
                                    </div>
                                    @if (!string.IsNullOrEmpty(item.RadioDTitle))
                                    {<div class="radio">
                                            <input id="radio-d-@item.Idx" asp-for="ListUserExerciseIdxs[i].UserAnswer" value="@item.Idx-D" type="radio">
                                            <label for="radio-d-@item.Idx" class="radio-label">@item.RadioDTitle</label>
                                        </div>
                                    }
                                </div>
                                @if (i == 24)
                                {
                                    <a href="javascript:;" id="prevButton-@i" class="prevButton tmbtn">上一题</a>
                                    <a href="javascript:;" id="submitbutton" class="tmbtn disabled">提交</a>
                                }
                                @if (i == 0)
                                {
                                    <a href="javascript:;" id="nextButton-@i" class='tmbtn nextButton @(item.UserAnswer == item.Idx + "-0"?"disabled":"")'><span>下一题</span></a>
                                }
                                @if (i > 0 && i < 24)
                                {
                                    <a href="javascript:;" id="prevButton-@i" class="prevButton tmbtn">上一题</a>
                                    <a href="javascript:;" id="nextButton-@i" class='tmbtn nextButton @(item.UserAnswer == item.Idx + "-0"?"disabled":"")'><span>下一题</span></a>
                                }

                            </div>
                        </div>

                    }

                </div>
            </div>
        </div>
    </form>

    <div class="weui-footer" style="margin-bottom:30px;">
        <p class="weui-footer__links">
            <a href="javascript:home();" style="color:white;" class="weui-footer__link">技术支持：河南省农业科学院农业经济与信息研究所</a>
            <a href="javascript:home();" style="color:white;" class="weui-footer__link">河南省天下粮仓信息技术有限公司</a>
        </p>
        <p class="weui-footer__text" style="color:white;">Copyright © 2001-2021 txlcinfo.com</p>
    </div>
    <div class="js_dialog" id="iosDialog1" style="display: none;">
        <div class="weui-mask"></div>
        <div class="weui-dialog">
            <div class="weui-dialog__hd"><strong class="weui-dialog__title">确认提交吗？</strong></div>
            <div class="weui-dialog__bd">提交后将不能修改</div>
            <div class="weui-dialog__ft">
                <a href="javascript:" id="submitCancel" class="weui-dialog__btn weui-dialog__btn_default">取消</a>
                <a href="javascript:" id="submitok" class="weui-dialog__btn weui-dialog__btn_primary">提交</a>
            </div>
        </div>
    </div>
</body>
</html>
